<template>
    <div class="item">
        <div class="item-header">
            <p>报警次数统计</p>
            <img src="../img/title_bor_tow.png" alt="">
        </div>
        <div class="item-chart" id="statistics"/>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        data() {
            return {
                chart: null,
            }
        },
        mounted() {
            let  option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid:{
                    top: '35px',
                    left: '15px',
                    right: '15px',
                    bottom: '15px',
                    containLabel: true
                },
                legend: {
                    itemHeight: 10,
                    itemWidth: 10,
                    right: 14,
                    top: 5,
                    textStyle: { //图例文字的样式
                        color: '#fff',
                        fontSize: 10
                    },
                    data: ['心率', '血压', 'SOS', '围栏', '总计']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            interval:0,
                            rotate:0,
                            textStyle: {
                                color: '#fff', //x轴data 的颜色
                                fontSize: 11,
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#131b26'],
                                width: 1,
                                type: 'solid'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 250,
                        interval: 50,
                        axisLabel: {
                            show: true,
                            interval:0,
                            rotate:0,
                            textStyle: {
                                color: '#fff', //x轴data 的颜色
                                fontSize: 11,
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: ['#131b26'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        "axisLine":{       //y轴
                            "show":false

                        },
                    },
                ],
                series: [
                    {
                        name: '心率',
                        type: 'bar',
                        barMaxWidth: 10,
                        data: [76, 135, 162, 32, 20, 6, 33],
                        itemStyle: {
                            normal: {
                                color: '#086ef3',
                            }
                        },
                    },
                    {
                        name: '血压',
                        type: 'bar',
                        barMaxWidth: 10,
                        data: [26, 59, 90, 64, 27, 77, 75],
                        itemStyle: {
                            normal: {
                                color: '#bdfeff',
                            }
                        },
                    },
                    {
                        name: 'SOS',
                        type: 'bar',
                        barMaxWidth: 10,
                        data: [67, 56, 22, 26, 20, 64, 33],
                        itemStyle: {
                            normal: {
                                color: '#a3f6ff',
                            }
                        },
                    },
                    {
                        name: '围栏',
                        type: 'bar',
                        barMaxWidth: 10,
                        data: [59, 90, 64, 87, 77, 76, 82],
                        itemStyle: {
                            normal: {
                                color: '#70deff',
                            }
                        },
                    },
                    {
                        name: '总计',
                        type: 'line',
                        data: [102, 203, 234, 230, 165, 120, 62],
                        itemStyle: {
                            normal: {
                                color: '#00a6ff',
                            }
                        },
                    }
                ]
            };
            this.chart = this.$echarts.init(document.getElementById('statistics'))
            // 绘制图表
            this.chart.setOption(option)
            erd.listenTo(this.$el,()=>{
                this.chart.resize();
            });
        }
    }
</script>

<style scoped lang="less">
    @import "index";
</style>
